<template lang="html">
	<div class="header" :class="{home_hader:isFixed,home_hader_background:DackGround,home_hader_background1:DackGround1}">
		<div class="header_box">
			<section class="header_transaction">
				<ul class="transaction_main">
					<li class="transaction_list" @click="changeUrl('/')">
						<img src="../../assets/image/logo.png" class="logoImg">
					</li>
					<li class="transaction_list" :class="{'transactionActive':index == navIndex-1}" v-for="(v,index) in headerNav" v-show="v.status" @click="changeUrl(v.url)">{{v.name}}</li>
				</ul>
			</section>
			<section class="header_personal">
				<ul class="personal_main" v-if="LoginState" :id="isFixed?'pos':''">
					<li class="personal_list notice">
						<!-- 公告 -->
						<span style="color:#fff">{{$t("header.navlist[4]")}}</span>
						<div class="notice_text">
							<div class="swiper-container" style="overflow:hidden">
								<div class="swiper-wrapper">
									<div class="swiper-slide" v-for="item in list">
										<router-link :to="{path:'/zixunDetails',query:{article_id:item.id}}"> {{item.title.substr(0,9)}}...</router-link>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="personal_list log">
						<router-link to="/Login">
							<!-- 登录 -->
							<i class="iconfont icon-zhuanhuan1"></i>{{$t("header.navlist[5]")}}
						</router-link>
					</li>
					<li class="personal_list reg">
						<router-link to="/Register">
							<!-- 注册 -->
							<i class="iconfont icon-zhuanhuan1"></i>{{$t("header.navlist[6]")}}
						</router-link>
					</li>
					<li class="personal_list day">
						<el-dropdown @command="changeDay">
							<span class="el-dropdown-link changeTime">
						    <img src="../../assets/image/index/day.png" v-if="changeBgData == 'day'"/>
						    <img src="../../assets/image/index/night.png" v-if="changeBgData == 'night'"/>
						    
						  	</span>
							<el-dropdown-menu slot="dropdown">
								<!-- 日间 -->
								<el-dropdown-item command="day">{{$t("header.themetext[0]")}}</el-dropdown-item>
								<!-- 夜间 -->
								<el-dropdown-item command="night">{{$t("header.themetext[1]")}}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</li>
					<li class="personal_list">
						<el-dropdown @command="handleCommand">
							<p class="changeLange">
								<!-- 简体中文 -->
								<span class="el-dropdown-link linkBorder" v-if="islange == 'Chinese'">
							  		  简体中文
							    	<i class="el-icon-arrow-down el-icon--right"></i>
							  	</span>
							  	<!-- English -->
								<span class="el-dropdown-link linkBorder" v-else>
						    		English
						    	 	<i class="el-icon-arrow-down el-icon--right"></i>
						  		</span>
							</p>
							<el-dropdown-menu slot="dropdown">
								<!-- 简体中文 -->
								<el-dropdown-item command="Chinese">简体中文</el-dropdown-item>
								<!-- English -->
								<el-dropdown-item command="English">English</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</li>
				</ul>
				<ul class="personal_main" v-else :id="isFixed?'pos':''">
					<li class="personal_list notice">
						<!-- 公告 -->
						<span style="color:#fff">{{$t("header.navlist[4]")}}</span>
						<div class="notice_text">
							<div class="swiper-container1" style="overflow:hidden">
								<div class="swiper-wrapper">
									<div class="swiper-slide" v-for="item in list">
										<router-link :to="{path:'/zixunDetails',query:{article_id:item.id}}"> {{item.title.substr(0,9)}}...</router-link>
										<!-- {{item.title.substr(0,9)}}... -->
									</div>
								</div>
							</div>
						</div>
					</li>
					<li v-show='Routingtype' class="personal_list">
						<router-link :to="Routing" :class="[isRouter == 5 ? activeClass : '']">
							<!-- 订单 -->
							<i class="iconfont icon-dingdan"></i>{{$t("header.navlist[7]")}}
						</router-link>
					</li>
					<li class="personal_list">
						<el-dropdown @command="handleDown">
							<span class="el-dropdown-link">
								<i class="iconfont icon-wode"></i>{{ phone }}<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>
									<router-link to="/MyAssets">
										<!-- 我的资产 -->
										<i class="iconfont icon-qianbao"></i>{{$t("header.state[0]")}}
									</router-link>
								</el-dropdown-item>
								<el-dropdown-item :divided="true">
									<router-link to="/security">
										<!-- 账号安全 -->
										<i class="iconfont icon-anquanbaozhang1"></i>{{$t("header.state[1]")}}
									</router-link>
								</el-dropdown-item>
								<el-dropdown-item :divided="true">
									<router-link to="/authentication">
										<!-- 身份验证 -->
										<i class="iconfont icon-shimingrenzheng"></i>{{$t("header.state[2]")}}
									</router-link>
								</el-dropdown-item>
								 <el-dropdown-item :divided="true">
									
									<a @click='goUrl'>
										<i class="iconfont icon-chongzhi1"></i>{{$t("header.state[3]")}}<!-- 经纪人 -->
									</a>
								</el-dropdown-item> 
								<el-dropdown-item :divided="true">
									<router-link to="/Mentionmoneyaddress">
										<!-- 提币地址 -->
										<i class="iconfont icon-anquanbaozhang1"></i>{{$t("header.state[4]")}}
									</router-link>
								</el-dropdown-item>
                                <el-dropdown-item :divided="true">
                                    <router-link to="/crowdFundRecord">
                                    	<!-- 众筹记录 -->
                                        <i class="iconfont icon-anquanbaozhang1"></i>{{$t("header.state[5]")}}
                                    </router-link>
                                </el-dropdown-item>
								<el-dropdown-item :divided="true">
									<span @click="signOut">						          		
										<router-link to="">
											<!-- 退出 -->
											<i class="iconfont icon-tuichudenglu"></i>{{$t("header.state[6]")}}
										</router-link>
									</span>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</li>
					<li class="personal_list">
						<el-dropdown @command="changeDay">
							<span class="el-dropdown-link changeTime">
							    <img src="../../assets/image/index/day.png" v-if="changeBgData == 'day'"/>
							    <img src="../../assets/image/index/night.png" v-if="changeBgData == 'night'"/>
						  	</span>
							<el-dropdown-menu slot="dropdown">
								<!-- 日间 -->
								<el-dropdown-item command="day">{{$t("header.themetext[0]")}}</el-dropdown-item>
								<!-- 夜间 -->
								<el-dropdown-item command="night">{{$t("header.themetext[1]")}}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</li>
					<li class="personal_list">
						<el-dropdown @command="handleCommand">
							<p class="changeLange">
								<!-- 简体中文 -->
								<span class="el-dropdown-link linkBorder" v-if="islange == 'Chinese'">
							  		  简体中文
							    	<i class="el-icon-arrow-down el-icon--right"></i>
							  	</span>
							  	<!-- English -->
								<span class="el-dropdown-link linkBorder" v-else>
						    		English
						    	 	<i class="el-icon-arrow-down el-icon--right"></i>
						  		</span>
							</p>
							<el-dropdown-menu slot="dropdown">
								<!-- 简体中文 -->
								<el-dropdown-item command="Chinese">简体中文</el-dropdown-item>
								<!-- English -->
								<el-dropdown-item command="English">English</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</li>
				</ul>
			</section>
		</div>
	</div>
</template>
<script>
	export default {
		props: ['isFixed'],
		data() {
			return {
				islange:'Chinese',   //语言标志
				navIndex:0,  //nav 标识
				DackGround: false,
				DackGround1:true,
				list: '',
				Routing: "",
				Routingtype: false,
				LoginState: false,
				account: null,
				token: null,
				phone: null,
				active: true,
				isRouter: 0,
				activeClass: 'blue',
				ziCanStatus: true, //控制资产的显示和隐藏
				is_apply: '', //经纪人状态判断
				apply_reason: '', //拒绝原因
				status: '', //判断没有没实名认证
				changeBgData: this.$cookies.get('changeBg') ? this.$cookies.get('changeBg') : 'night',
				home: this.$router.path,
				headerNav: null,
			};
		},
		methods: {
			changeDay(val) {
				var _this = this;
				_this.$cookies.set("changeBg", val, 60 * 60 * 24 * 30);
				if(_this.$cookies.get('changeBg') == 'night') {
					$('#main').removeClass('mainb');
					$('#main').addClass('mainy');
					this.changeBgData = 'night';
				} else {
					$('#main').removeClass('mainy');
					$('#main').addClass('mainb');
					this.changeBgData = 'day';
				}
				history.go(0);
			},
			signOut() { // 登出
				var _this = this;
				_this.$confirm(_this.$t("header.Tipstext1[0]"), _this.$t("header.Tipstext1[1]"), { //您确定退出HUB网吗
					confirmButtonText: _this.$t("header.Tipstext1[2]"), //确定
					cancelButtonText: _this.$t("header.Tipstext1[3]"),
					type: 'warning'
				}).then(() => {
					_this.$message({
						type: 'success',
						message: _this.$t("header.Tipstext1[4]"),
					});
					sessionStorage.clear();
					_this.$public.go('login', 100, _this);

				}).catch(() => {
					_this.$message({
						type: 'info',
						message: _this.$t("header.Tipstext1[5]")
					});
				});
			},
			goUrl() {
				var _this = this;
				
				_this.$public.go('/economicMan', 100, _this);
				return false;
				
				if(_this.status != 3) {
					//您还没有通过实名认证，是否立刻实名认证
					_this.$confirm( _this.$t("header.Tipstext2[1]"),  _this.$t("header.Tipstext1[1]"), {
						confirmButtonText: _this.$t("header.Tipstext1[2]"), //确定
						cancelButtonText: _this.$t("header.Tipstext1[3]"),
						type: 'warning'
					}).then(() => {
						_this.$public.go('/authentication', 100, _this);
					}).catch(() => {
						_this.$message({
							type: 'info',
							message: _this.$t("header.Tipstext1[5]")
						});
					});
					return false;
				}
				switch(_this.is_apply) {
					case '1':
						_this.$public.go('/isapply', 100, _this);
						break;
					case '2':
						// 您的信息正在审核中
						_this.$public.msg(_this.$t("header.Tipstext3[0]"), 'warning', _this);
						break;
					case '3':
						_this.$public.go('/economicMan', 100, _this);
						break;
					case '4':
						_this.$confirm(_this.apply_reason, _this.$t("header.Tipstext3[1]"), { //拒绝理由
							confirmButtonText: _this.$t("header.Tipstext3[2]"), //重新申请
							cancelButtonText: _this.$t("header.Tipstext1[3]"),
							type: 'warning'
						}).then(() => {
							_this.$public.go('/isapply', 100, _this);
						}).catch(() => {});
						break;
				}
			},
			changeUrl(url) {
				var _this = this;
				switch(url) {
					case "/":
						_this.$public.go(url, 100, _this);
						_this.Routingtype = false;
						break;
					case "apply":
						_this.$public.go(url, 100, _this);
						_this.Routingtype = false;
						break;
					case "frenchcurrency":
						_this.$public.go(url, 100, _this);
						_this.Routing = "/fbOrder"; // 法币交易
						_this.Routingtype = true;
						break;
					case "coincoin":
						_this.$public.go(url, 100, _this);
						_this.Routing = "/bbOrder"; // bibi交易
						_this.Routingtype = true;
						_this.ziCanStatus = false;
						break;
					case "agreement":
						_this.$router.push({
							path: url,
							query: {
								name: 'IOAEX',
								type: 'faq'
							}
						});
					case "crowdFunding":
						_this.$router.push({
							path: url,
							query: {
								name: 'IOAEX',
								type: 'faq'
							}
						});
					default:
						_this.Routingtype = false;
						break;
				};
			},
			ChangingRouting() { // 订单切换修改路由
				var _this = this;
				_this.account = window.sessionStorage.account;
				_this.token = window.sessionStorage.token;
				if(!_this.account && !_this.token) {
					_this.LoginState = true;
				};
			},
			defaultChangColor() {
				var _this = this;
				switch(_this.$route.matched[0].path) {
					case "/frenchdetails":
					case "/frenchcurrency":
						_this.isRouter = 0; // 法币交易
						break;
					case "/currencyExchange":
						_this.isRouter = 1; // 币币交易
						break;
					case "/leveragedtrade":
						_this.isRouter = 2; // 杠杆交易
						break;
					case "/apply":
					case "/sell":
					case "/buy":
						_this.isRouter = 3; // 发布广告
						break;
					case "/ziChan":
					case "/moneyRecord":
						_this.isRouter = 4; // 资产
						break;
					case "/ggOrder":
						_this.isRouter = 5; // 订单
						break;
					default:
						_this.isRouter = null;
						break;
				};
			},
			getUserData() {
				var _this = this;
				if(!sessionStorage.account) {
					return false;
				}
				_this.$http.post(_this.$http.user_info, {}).then(function(response) {
					if(response.data.status == "200") {
						_this.is_apply = response.data.data.is_apply;
						_this.apply_reason = response.data.data.apply_reason;
						//是否实名认证
						_this.status = response.data.data.status;

					} else {
						_this.$public.msg(response.data.msg, 'warning', _this);
					}
				}).catch(function(error) {});
			},
			handleCommand(command) {
				var _this = this;
				_this.$cookies.set("language", command, 60 * 60 * 24 * 30);
				_this.$i18n.locale = command;
				history.go(0);
			},
			requestPublic: function() {
				var _this = this;
				_this.$http.get(_this.$http.zixunList, {
						params: {}
					})
					.then((res) => {
						_this.list = res.data.data.res;
						setTimeout(function() {
							var swiper = new Swiper('.swiper-container', {
								direction: 'vertical',
								loop: true,
								// slidesPerView: 1,
								// spaceBetween: 30,
								autoplay: 2000,
							});
							var swiper1 = new Swiper('.swiper-container1', {
								direction: 'vertical',
								loop: true,
								// slidesPerView: 1,
								// spaceBetween: 30,
								autoplay: 2000,
							});
						}, 2000)
					});
			},
			ckLange(){
				if(this.$cookies.get('language')){
					this.islange = this.$cookies.get('language');
				}
				
			},
			handleDown(){
				var _this = this;
				_this.navIndex = 0;
				sessionStorage.navIndex = 0;
			},
			addBorder(){
				var _this = this;
				if(sessionStorage.navIndex){
					_this.navIndex = sessionStorage.navIndex; 
				}
				
				$('.transaction_list').on('click',function(){
					$(this).addClass('transactionActive').siblings('li').removeClass('transactionActive');
					//缓存住
					_this.navIndex = $(this).index();
					sessionStorage.navIndex = $(this).index();
				})
			}
			
		},
		// 路由改变时
		beforeRouteLeave(to, from, next) {
			var _this = this;
			next();
		},
		mounted: function() {
			var _this = this;
			if(!_this.$parent.isFixed) {
				_this.DackGround1 = true;
			}else {
				_this.DackGround1 = false;
			}
			if(_this.$route.path != '/home') {
				_this.DackGround1 = true;
			} else {
				_this.DackGround1 = false;
			}
			window.onscroll = function() {
				var t = document.documentElement.scrollTop || document.body.scrollTop; //获取距离页面顶部的距离
				if(_this.$parent.isFixed) {
					if(t >= 1) { //当距离顶部超过300px时
						_this.DackGround = true;
					} else { //如果距离顶部小于300px
						_this.DackGround = false;
					}
				}
			}
			this.requestPublic();
			this.addBorder();
		},
		created: function() {
			var _this = this;
			_this.ckLange();  //语言选择
			_this.ChangingRouting();
			_this.defaultChangColor();
			_this.getUserData();
			_this.phone = _this.$public.phoneEncryption(sessionStorage.getItem('mobile'));
			// if(_this.$route.path!='/home'){
			// 	$("div[class*='webcall_message_show']").css('display','none');
			// }else{
			// 	$("div[class*='webcall_message_show']").css('display','block');
			// }
		
			if(_this.$cookies.get('language')) {
				_this.$i18n.locale = _this.$cookies.get('language');
				_this.islange = _this.$cookies.get('language');
			}else {
				_this.$cookies.set("language", 'Chinese', 60 * 60 * 24 * 30);
			}
			_this.headerNav = [{
					name: _this.$t("header.navlist[0]"), //法币C2C交易
					url: 'frenchcurrency',
					status: true
				}, {
					name: _this.$t("header.navlist[1]"),  //币币交易
					url: 'coincoin',
					status: true
				}, {
					name: _this.$t("header.navlist[2]"), //发布公告
					url: 'apply',
					status: true
				}, {
					name: _this.$t("header.navlist[3]"), //众筹
					url: 'crowdFunding',//crowdFunding
					status: true
				}];
			
		},
		watch: {
			$route(to, from) {
				var _this = this;
				if(to.path == '/home') {
					_this.DackGround1 = false;
				} else {
					_this.DackGround1 = true;
				}
				if(to.path.indexOf('/zixunDetails') != -1) {
					this.$router.go(0);
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.iconfont {
		font-size: 14px;
		position: relative;
		left: -4px;
	}
	
	.fixeds {
		position: fixed;
		height: 96px;
		line-height: 96px;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0);
	}
</style>